<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="基础设置（数值型）"
      width="700px"
      v-bind="$attrs"
      @open="onOpen"
      @close="onClose"
    >
      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="默认值:" prop="default">
              <el-input
                v-model="formData.default"
                placeholder="请输入默认值"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最小值:" prop="minimum">
              <el-input-number
                v-model="formData.minimum"
                style="width: 160px"
                placeholder="请输入"
                :step="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大值:" prop="maximum">
              <el-input-number
                v-model="formData.maximum"
                style="width: 160px"
                placeholder="请输入"
                :step="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="枚举:" prop="enum">
              <el-input
                v-model="formData.enum"
                type="textarea"
                placeholder="请输入枚举，一行一个"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="枚举描述:" prop="enumDesc">
              <el-input
                v-model="formData.enumDesc"
                type="textarea"
                placeholder="请输入枚举描述"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import compact from "lodash/compact";
import { reactive, getCurrentInstance, toRefs } from "vue";
import { ElMessage } from "element-plus";

export default {
  name: "NumberDialog",
  inheritAttrs: false,
  props: {
    initData: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      dialogVisible: false,
      formData: {
        default: undefined,
        minimum: undefined,
        maximum: undefined,
        enum: undefined,
        enumDesc: undefined,
      },
      rules: {
        default: [],
        minimum: [],
        maximum: [],
        enum: [
          {
            pattern: /\n/,
            message: "请输入枚举，一行一个",
            trigger: "blur",
          },
        ],
        enumDesc: [],
      },
    });

    const onOpen = () => {
      const { minimum, maximum, enumDesc } = props.initData;
      let enumValue = props.initData.enum;
      if (enumValue) {
        try {
          enumValue = enumValue.join("\n");
        } catch (e) {
          ElMessage({
            message: "枚举数据格式不对，将丢失",
            type: "warning",
          });
          enumValue = "";
        }
      }
      state.formData = {
        ...state.formData,
        default: props.initData.default,
        minimum,
        maximum,
        enum: enumValue,
        enumDesc,
      };
      state.dialogVisible = true;
    };
    const { proxy } = getCurrentInstance();
    const onClose = () => {
      proxy.$refs.ruleForm.resetFields();
      state.dialogVisible = false;
    };
    const handleConfirm = () => {
      proxy.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        const newData = {...state.formData};
        if (newData.enum) {
          newData.enum = compact(newData.enum.split("\n"));
        }
        proxy.mittBus.emit(`schema-update-${props.initData.editorId}`, {
          eventType: "save-setting",
          // 之前的参数
          ...props.initData,
          // 设置数据
          newData,
        });
        onClose();
      });
    };

    return {
      ...toRefs(state),
      onOpen,
      onClose,
      handleConfirm,
    };
  },
};
</script>
